<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>综合案例</title>		
		<meta name="viewport" content="initial-scale=1,maximum-scale=1">
	</head>



	<style>
		.onelist{margin:10px 0 5px 12px;}
		.onelist label{width:80px;display:inline-block}
		.onelist input,.onelist select{height:25px;line-height:25px;width:220px;
			border-radius:3px;border:1px solid #e2e2e2;}
		.onelist input[type="submit"]{width:150px;height:30px;line-height:30px;}
	</style>




<!--label 标签为 input 元素定义标注（标记）,<label>标签的 for 属性应当与相关元素的 id 属性相同。
    select为form里的下拉表标签，multiple属性为可多选，但按住ctrl才能多选
    checkbox为复选框标签
    radio为单选框标签
	textarea为文本域
	file控件可以选择本地的文件
	hidden控件的内容在网页上不显示，但提交时会将其中的数据一起提交个服务器
	input的readonly和disabled属性使得内容只读，但readonly会被提交给服务器，而disabled不会被提交
-->

<!--注意pattern里正则表达式的写法-->

<!--表单的提交格式：action?name=value&name=value...
    表单的提交实质上是将一个个键值对提交给服务器
    所以input类型要加name属性确定其key，而radio、checkbox要加name和value分别确定其key和value
-->
	<body>

		<form action="" method="post" class="myform">



			<div class="onelist">
				<label for="UserName">手机号</label>
				<input name="UserName" id="UserName" type="text" placeholder="请输入手机号"
					pattern="^1[0-9]{10}$" required autofocus>
			</div>

			<!--autocomplete为第二次输入的自动联想功能，但密码类型不可用-->
			<div class="onelist">
				<label for="e-mail">邮箱</label>
				<input name="e-mail" id="e-mail" type="email" placeholder="请输入邮箱" autocomplete="on">
			</div>


			<div class="onelist">
				<label for="Password">密码</label>
				<input name="Password" id="Password" type="password" placeholder="6~12位"
					pattern="^[a-zA-Z0-9]\w{5,19}$" required >
			</div>



			<div class="onelist">
				<label for="RePassword">确认密码</label>
				<input name="RePassword" id="RePassword" type="password" placeholder="再次输入密码"
					required>
			</div>



			<div class="onelist">
				<label for="select">了解渠道</label>
				<select name="channel">
					<option value="null">√==请选择==</option>
					<option value="1">搜索引擎</option>
					<option value="2">朋友圈</option>
					<option value="3">朋友推荐</option>
					<option value="4">广告投放</option>
				</select>				
			</div>



			<div class="onelist">
				<input type="submit" value="提交">
			</div>

		</form>

		

			<script type="text/javascript"></script>

	</body>

</html>